import { Notice } from '../components/Notice'
import { Search } from '../components/Search'
import type { BodyItem } from '../types'
import SourceBox from '../components/SourceBox'

// 渲染页面组件
export const renderComponent = (component: BodyItem, index: number) => {
  console.log('index', index)
  console.log('>>> render type', component.type)

  const renderContent = () => {
    switch (component.type) {
      case 'notice':
        return <Notice title={component.title} content={component.content} />

      case 'search':
        return <Search />
      default:
        return null
    }
  }

  // 为designer中的组件添加拖拽能力
  return (
    <SourceBox data={{ _index: index, ...component }}>
      <div style={{ width: '100%' }}>{renderContent()}</div>
    </SourceBox>
  )
}
